<script setup>
import { reactive } from "vue";
import {baseUrl} from "@/utils/config";

const props = defineProps({
  userInfo: {
    type: Object,
    default: () => ({})
  }
})
const login = () => {

}
const handleDetail = () => {
  uni.navigateTo({
    url: '/pages/user/index'
  })
}
</script>

<template>
  <view class="user-area" @click="handleDetail">
    <view class="avatar">
      <nut-avatar size="large" shape="square">
        <image :src="baseUrl + userInfo.avatar" />
      </nut-avatar>
    </view>
    <view class="user-info">
      <view class="nickname">{{ userInfo.nickName === 'null' ? '未设置昵称' : userInfo.nickName }}</view>
      <view class="info">{{ userInfo.dept?.deptName }}</view>
    </view>
    <view class="arrow">
      <nut-icon name="right" custom-color="#ddd"></nut-icon>
    </view>
  </view>
</template>

<style scoped lang="scss">
  .user-area{
    display: flex;
    justify-content: space-between;
    padding: 20px 40px;
    .avatar{
      width: 60px;
      margin: 0 20px 0 0;
    }
    .user-info{
      width: calc(100% - 100px);
      padding: 5px 0 0;
      .nickname{
        font-size: 18px;
      }
      .info{
        font-size: 14px;
        padding: 5px 0 0;
        color: #999;
      }
    }
    .arrow{
      width: 20px;
      display: flex;
      align-items: center;
    }
  }
</style>
